<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.ico">
  <title>壹脉智能CRM</title>
  <link href="./css/bootstrap.min.css" rel="stylesheet">
  <link href="./css/perfect-scrollbar.min.css" rel="stylesheet">
  <link href="css/style.min.css" rel="stylesheet">
  <!-- You can change the theme colors from here -->
  <link href="css/colors/default.css" id="theme" rel="stylesheet">
  <link rel="stylesheet" href="css/daterangepicker.css">
  <link rel="stylesheet" href="css/diy.min.css">
</head>

<body class="fix-header fix-sidebar card-no-border">
  <div class="preloader">
    <div class="loader">
      <div class="loader__figure"></div>
      <p class="loader__label">壹脉</p>
    </div>
  </div>
  <div id="main-wrapper">
    <!-- 导航 -->
    <header class="topbar">
      <nav class="navbar top-navbar navbar-expand-md navbar-light">
        <div class="navbar-header">
          <a class="navbar-brand" href="../index.html">
            <b>
              <img src="../assets/images/diy/yimai.png" alt="homepage" class="dark-logo"/>
            </b>
            <span>
              <span class="fs18 cblue p-l-6 fbold">壹脉智能CRM</span>
            </span>
          </a>
        </div>
        <div class="navbar-collapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link nav-toggler hidden-md-up waves-effect waves-dark"href="javascript:void(0)">
                <i class="sl-icon-menu"></i>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link sidebartoggler hidden-sm-down waves-effect waves-dark"href="javascript:void(0)">
                <i class="sl-icon-menu"></i>
              </a>
            </li>
          </ul>
          <user-head></user-head>
        </div>
      </nav>
    </header>
    <!-- 侧边栏 -->
    <aside class="left-sidebar">
      <div class="scroll-sidebar">
        <company-position></company-position>
        <nav class="sidebar-nav p-0">
          <c-slider current="11"></c-slider>
        </nav>
      </div>
    </aside>
    <!-- main -->
    <div class="page-wrapper">
      <div class="container-fluid">
        <div class="row page-titles">
          <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">编辑优惠券</h3>
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="javascript:void(0)">HOME</a></li>
              <li class="breadcrumb-item active">编辑优惠券</li>
            </ol>
          </div>
        </div>
        <div class="">
          <!--优惠券名称-->
          <div class="form-group" >
            <label class="col-2 text-right font-weight-bold" >优惠券名称</label>
            <input type="text"  class="form-control col-3" v-model="form.name">
          </div>

          <!--最低消费金额-->
          <div class="form-group" >
            <label class="col-2 text-right font-weight-bold" >优惠券面值</label>
            <input type="text"  class="form-control col-3" @change="faceValueChange" v-model="form.minAmount">
          </div>
          <!--选择类型-->
          <div class="form-group">
            <label class="col-2 text-right font-weight-bold" >优惠券类型</label>
            <select class="form-control col-3" v-model="form.couponType">
              <option value="1" selected>满减券</option>
              <option value="2">折扣券</option>
            </select>
          </div>
          <div class="form-group">
            <div  v-if="form.couponType == 1" >
              <label class="col-2 text-right font-weight-bold" >{{fullReduction}}</label>
              <input type="text" class="form-control col-3" v-model="form.couponFaceValue">元
            </div>
            <div  v-if="form.couponType == 2" >
              <label class="col-2 text-right font-weight-bold">折扣</label>
              <input type="text" v-if="form.couponType == 2" class="form-control col-3" v-model="form.couponDiscount">折
            </div>
          </div>

          <!--使用范围-->
          <div class="form-group d-flex align-items-center" style="min-height: 38px">
            <label class="col-2 text-right font-weight-bold mb-0">使用范围</label>
            <div class="custom-control custom-radio d-flex align-items-center mb-0"  @click="() => form.goodstypeIds = 0">
              <input type="radio" id="priceSpecific" name="inlineRadioOptions" class="custom-control-input" value="0" checked>
              <label for="priceSpecific" class="c38 m-l-5 m-r-10 custom-control-label">全场通用</label>
            </div>
            <div class="custom-control custom-radio d-flex align-items-center mb-0" @click="() => form.goodstypeIds = 1">
              <input type="radio" id="priceArea" name="inlineRadioOptions" class="custom-control-input" value="1" >
              <label for="priceArea" class="c38 m-l-5 m-r-5 custom-control-label">按品类使用</label>
            </div>
            <div class="form-check form-check-inline mx-2" v-if="form.goodstypeIds === 1">
              <select class="custom-select pr-5 bced" v-model="form.goodstypeId">
                <option value="0" class="cbcc" selected disabled>选择商品分类</option>
                <option v-for="(item,index) in goodsType" :key="index" :value="item.goodstypeId" >
                  {{item.name}}
                </option>
              </select>
            </div>
            <span v-if="form.goodstypeIds === 1">专用</span>
          </div>

          <!--发劵日期-->
          <div class="form-group">
            <label  class="col-2 text-right font-weight-bold">发劵日期</label>
            <el-date-picker
                    v-model="form.grantTime"
                    type="daterange"

                    value-format="yyyy-MM-dd"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
          <!--使用有效日期-->
          <div class="form-group">
            <label class="col-2 text-right font-weight-bold">使用有效日期</label>
            <el-date-picker
                    v-model="form.effectiveTime"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
          <!--发放方式-->
          <div class="form-group d-flex align-items-center">
            <label class="col-2 text-right font-weight-bold mb-0" >发放方式</label>
            <div class="custom-control custom-radio d-flex align-items-center mb-0"  @click="() => form.grantMode = 0">
              <input type="radio" id="radio3" name="grantMode" class="custom-control-input" value="0" checked>
              <label for="radio3" class="c38 m-l-5 m-r-10 custom-control-label">新用户赠劵</label>
            </div>
            <div class="custom-control custom-radio d-flex align-items-center mb-0" @click="() => form.grantMode = 1">
              <input type="radio" id="radio4" name="grantMode" class="custom-control-input" value="1" >
              <label for="radio4" class="c38 m-l-5 m-r-5 custom-control-label">首页赠劵</label>
            </div>
          </div>

          <!--投放总量-->
          <div class="form-group">
            <label class="col-2 text-right font-weight-bold" >发放数量</label>
            <input type="text"  class="form-control col-3" v-model="form.couponNum">
            <span>张</span>
          </div>

          <div class="form-group" >
            <label class="col-2 text-right font-weight-bold" >同一用户最多发放</label>
            <input type="text"  class="form-control col-3" v-model="form.maxUser">
          </div>

          <div class="form-group">
            <label class="col-2 text-right font-weight-bold" >发放状态:</label>
            <el-switch
                    v-model="form.pubState"
                    active-text="启用"
                    inactive-text="禁用">
            </el-switch>
          </div>

          <div class="form-group">
            <label class="col-2 text-right font-weight-bold" >备注:</label>
            <input type="text"  class="form-control col-3" v-model="form.note">
          </div>
        </div>
        <div class="row">
          <div class="col-12 d-flex justify-content-center">
            <button type="button" @click="cancelEvent" class="px-5 btn btn-outline-secondary">取消</button>
            <button class="btn ml-3 px-5 btn-primary border-0" @click="releaseEvent" style="background-color: #007bff;" type="button">发布</button>
          </div>
        </div>
      </div>
    </div>
  </div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/perfect-scrollbar.jquery.min.js"></script>
<script src="js/sidebarmenu.js"></script>
<script src="js/custom.min.js"></script>
<script src="js/layer/layer.js"></script>
<script src="js/vue.js"></script>
<script src="js/config.js"></script><script src="js/extend.js"></script>
<script src="js/moment.js"></script>
<script src="js/daterangepicker.js"></script>
<script>
const initData = () => {
  return {
    goodsType: [],
    fullReduction: '满减',
    form: {
      //用户名
      name:'',
      minAmount:'',
      pubState:false,
      maxUser:'',
      // 选择类型
      couponType: 1,
      couponFaceValue:"",
      couponDiscount:"",
      // 使用范围 (全场通用)
      goodstypeId: 0,
      goodstypeIds:0,
      // 发券日期(开始日期)
      grantStartTime: '',
      // 发券日期(结束日期)
      grantEndTime: '',
      effectiveTime:[],
      grantTime:[],
      // 使用有效期(开始日期)
      effectiveStartTime: '',
      // 使用有效期(结束日期)
      effectiveEndTime: '',

      // 投放总量
      couponNum: null,
      // 领取数量限制 (不限制)
      // 领取数量限制 (限制)
      // 发放方式 (1为自动，2为手动)
      grantMode: 1,
    }
  }
}
$(function () {
  var vw = new Vue({
    el: '#main-wrapper',
    data: initData(),
    created() {
      $.cAjax('/crmPc/companyGoods/getGoodsTypeInfo').then(data => {
        this.goodsType = data
      }).catch(function (err) {

      });
    },
    mounted() {
        const couponId = $.formatParams(location.href).couponId

        $.cAjax('/crmPc/company/coupon/findCompanyCouponById', {
            data: {
                couponId: couponId
            }
        }).then(res => {
            console.log(res);
            res.pubState = res.pubState == 2 ? true : false

            const grant = [res.grantStartTime,res.grantEndTime]
            res.grantTime = grant;

            const effective = [res.effectiveStartTime,res.effectiveEndTime]
            res.effectiveTime = effective;

            this.form = res;
        })
    },
    methods: {
      faceValueChange(value){
        this.fullReduction = "满" + this.form.minAmount + "减";
      },
      // 取消
      cancelEvent() {
        Object.assign(this.$data, initData())

      },
      // 发布优惠券
      releaseEvent() {
        if (!this.form.grantTime ) {
          layer.msg('请选择发券日期');
          return
        }
        if (!this.form.effectiveTime) {
          layer.msg('请选择使用有效期');
          return
        }

        if (!this.form.couponNum) {
          layer.msg('请输入优惠卷投放数量');
          return
        }
        if (this.form.maxUser !== 0) {
          if (this.form.maxUser === null) {
            layer.msg('请输入领取数量限制')
            return
          }
        }
        if(this.form.couponType == 2 && this.form.couponDiscount > 10){
          layer.msg('折扣不能大于10,范围是0-10')
          return
        }

        //编辑时检查是否更换过优惠券折扣类型
        if(this.form.couponType == 2){
          this.form.couponFaceValue = 0;
        }else if(this.form.couponType == 1){
          this.form.couponDiscount = 0;
        }

        //数据处理
        const grant = this.form.grantTime ;
        this.form.grantStartTime = grant[0];
        this.form.grantEndTime = grant[1];
        const effect = this.form.effectiveTime ;
        this.form.effectiveStartTime = effect[0];
        this.form.effectiveEndTime = effect[1];
        this.form.minAmount = this.form.minAmount  ? parseInt(this.form.minAmount) : 0
        this.form.maxUser = this.form.maxUser  ? parseInt(this.form.maxUser) : 0
        this.form.pubState = this.form.pubState == true ? 2 : 1;
        console.log(this.form)
        $.cAjax('/crmPc/company/coupon/upd', {data: this.form}).then(res => {
          if(res == 200){
            //去列表
            window.location.href ="/main/couponManage.html";
          }
        }).catch(function (err) {
        });
      },

    }
  })
})
</script>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</body>
</html>
